import React, { Component } from 'react';
import "../styles/AddressAdd.scss"
import { NavBar, Switch,Toast } from 'antd-mobile';
import {address_add} from "../api/index"

class AddressAdd extends Component {
    state = {
        name: '',
        tel: '',
        province: '',
        city: '',
        county: '',
        addressDetail: '',
        isDefault: false
    }
    handleChange(e) {
        this.setState({ [e.target.name]: e.target.type == 'checkbox' ? e.target.checked : e.target.value })
    }
    change(){
        this.setState({isDefault:!this.state.isDefault})
    }
    async hold(){
        let res = await address_add({
            userid:localStorage.getItem('userid'),
            name:this.state.name,
            tel:this.state.tel,
            province:this.state.province,
            city:this.state.city,
            county:this.state.county,
            addressDetail:this.state.addressDetail,
            isDefault:this.state.isDefault,
        })
        if(res.data.code == '200'){
            Toast.show('添加地址成功')
            this.props.history.go(-1)
        }
    }
    render() {
        return (
            <div className='addressadd'>
                <NavBar className='header' onBack={() => { this.props.history.go(-1) }}>添加地址</NavBar>
                <form>
                    <div className="ipt">
                        <span>姓名</span>
                        <input name='name'
                            value={this.state.name}
                            onChange={(e) => { this.handleChange(e) }} type="text" placeholder='姓名' />
                    </div>
                    <div className="ipt">
                        <span>电话</span>
                        <input name='tel'
                            value={this.state.tel}
                            onChange={(e) => { this.handleChange(e) }} type="text" placeholder='电话' />
                    </div>
                    <div className="ipt">
                        <span>省</span>
                        <input name='province'
                            value={this.state.province}
                            onChange={(e) => { this.handleChange(e) }} type="text" placeholder='省' />
                    </div>
                    <div className="ipt">
                        <span>市</span>
                        <input name='city'
                            value={this.state.city}
                            onChange={(e) => { this.handleChange(e) }} type="text" placeholder='市' />
                    </div>
                    <div className="ipt">
                        <span>区</span>
                        <input name='county'
                            value={this.state.county}
                            onChange={(e) => { this.handleChange(e) }} type="text" placeholder='区' />
                    </div>
                    <div className="ipt">
                        <span>详细地址</span>
                        <input name='addressDetail'
                            value={this.state.addressDetail}
                            onChange={(e) => { this.handleChange(e) }} type="text" placeholder='详细地址' />
                    </div>
                </form>
                <div className="switch">
                    <span>设为默认收货地址</span>
                    <Switch name='isDefault' checked={this.state.isDefault} onChange={()=>{this.change()}}/>
                </div>
                <div className="btn" onClick={()=>{this.hold()}}>保存</div>
            
            </div>
        );
    }
}

export default AddressAdd;